<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" th:href="@{'/webjars/layui/2.3.0/css/layui.css'}">
    <link rel="shortcut icon" th:href="@{'/img/favicon.ico'}">
    <link rel="stylesheet" th:href="@{'/webjars/font-awesome/4.7.0/css/font-awesome.css'}">
    <script language="JavaScript" th:src="@{'/webjars/jquery/3.3.1/dist/jquery.min.js'}"></script>
    <script language="JavaScript" th:src="@{'/js/dateformat.js'}" charset="utf-8"></script>
    <script language="JavaScript" th:src="@{'/js/common.js'}" charset="utf-8"></script>

</head>
<body>
<ul th:insert="~{fragment/header :: top}"></ul>
<br>
<div class="demoTable layui-col-lg-offset1">
    <div class="layui-inline layui-form-pane">
        <label class="layui-form-label">学生学号：</label>
        <div class="layui-inline">
            <input class="layui-input layui-col-lg6 layui-form-pane" name="sid"
                   id="sidSearch" autocomplete="on">
        </div>
    </div>
    <div class="layui-inline layui-form-pane">
        <label class="layui-form-label">学科名称：</label>
        <div class="layui-inline">
            <input class="layui-input layui-col-lg6 layui-form-pane" name="subjectName" id="subjectName"
                   lay-verify="number" autocomplete="on">
        </div>
    </div>
    <div class="layui-inline layui-form-pane">
        <label class="layui-form-label">申核状态</label>
        <div class="layui-inline">
            <select name="review" id="reviewSearch" class="layui-select" style="width: 120px;">
                <option th:value="-1">请选择</option>
                <option th:value="0">待申核</option>
                <option th:value="1">申核中</option>
                <option th:value="2">申核完成无误</option>
            </select>
        </div>
    </div>
    <button class="layui-btn layui-icon layui-icon-search" data-type="reload"> 搜索
    </button>
</div>
<table id="mark" lay-filter="mark"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-radius layui-icon layui-icon-read" lay-event="detail"> 查看</a>

    <a class="layui-btn layui-btn-xs layui-btn-radius layui-icon layui-icon-edit" lay-event="edit" th:if="${session.user.userType} ne '学生'">
        编辑</a>

    <a class="layui-btn layui-btn-radius layui-btn-xs layui-icon layui-icon-delete" lay-event="review"
       th:if="${session.user.userType} ne '学生'">申核</a>

    <a class="layui-btn layui-btn-radius layui-btn-xs layui-icon layui-icon-delete" lay-event="review"
       th:if="${session.user.userType} eq '学生'">申请</a>

    <a class="layui-btn layui-btn-danger layui-btn-radius layui-btn-xs layui-icon layui-icon-delete" lay-event="del"
       th:if="${session.user.userType} ne '学生'">删除</a>


</script>

<script th:inline="none" language="JavaScript">
    $(function () {
        layui.use(["table", "util", "layer", "laytpl"], function () {
            var $table = layui.table;
            var $utils = layui.util;
            var $layer = layui.layer;
            var $laytpl = layui.laytpl;
            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');
                    $table.reload('mark', {
                        where: {
                            sid: $("#sidSearch").val(),
                            subjectName: $("#subjectName").val(),
                            reviewId: $("#reviewSearch").val(),
                        },
                        page: true,
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            $("#sidSearch").change(function () {
                $(".demoTable .layui-btn").click();
            });
            $("#subjectName").change(function () {
                $(".demoTable .layui-btn").click();
            });
            $("#reviewSearch").change(function () {
                $(".demoTable .layui-btn").click();
            });
            //第一个实例
            $table.render({
                elem: '#mark',
                height: 471,
                //数据接口,
                url: '/stu/mark/markInfo',
                method: "post",
                //开启分页
                page: true,
                //表头
                cols: [[
                    {field: 'sid', title: '学号', templet: '#sid', align: 'center', width: 150},
                    {field: 'name', title: '姓名', align: 'center', templet: "#name", width: 100},
                    {field: 'subjectId', title: '课程编号', align: 'center', width: 100},
                    {field: 'subjectName', title: '课程名称', align: 'center', width: 100},
                    {field: 'team', title: '学期', align: 'center', width: 180},
                    {field: 'score', title: '成绩', align: 'center', width: 100},
                    {field: 'credit', title: '学分', align: 'center', width: 90},
                    {field: 'gpa', title: '绩点', align: 'center', width: 90},
                    {field: 'reviewId', title: '审核', align: 'center', width: 128, templet: "#reviewId"},
                    {field: 'right', title: '操作', toolbar: "#barDemo", align: 'center', width: 300}
                ]],
                where: {
                    subjectName: $("#subjectName").val(),
                    sid: $("#sidSearch").val(),
                    reviewId: $("#reviewSearch").val(),
                },
            });

            $table.on("tool(mark)", function (obj) {
                console.log(obj);
                if (obj.event === "detail") {
                    window.location.href = "/stu/mark/to/markDetail/" + obj.data.subjectId + "/" + obj.data.student.sid;
                }

                if (obj.event === "edit") {
                    console.log(obj.data.student.sid);
                    window.location.href = "/stu/mark/to/markEdit/" + obj.data.markId + "/" + obj.data.student.sid;
                }

                if (obj.event === "del") {
                    $layer.confirm("确认删除 " + obj.data.student.name + "的" + obj.data.subjectName + " 的成绩吗？",
                        {
                            icon: 3,
                        },
                        function (res) {
                            $.ajax({
                                url: "/stu/mark/del/" + obj.data.markId,
                                type: "post",
                                data: {
                                    _method: "delete"
                                },
                                success: function (res) {
                                    if (res.code === 200) {
                                        $('.demoTable .layui-btn').click();
                                    }
                                }
                            });
                            $layer.close(res);
                        }
                    );

                }

                if (obj.event === "review") {
                    var url = "/stu/mark/review/" + obj.data.markId + "/" + obj.data.student.sid;
                    var session = $("#session").val();
                    var title = "", reviewInt = 0;
                    if (session === "管理员" || session === "教师") {
                        reviewInt = 2;
                        title = "申核";
                    }
                    if (session === "学生") {
                        reviewInt = 1;
                        title = "申请";
                    }
                    if ((session === "管理员" || session === "教师") && obj.data.reviewId === 1) {
                        $layer.confirm("确认" + title + "吗？", {icon: 3, title: title}, function (index) {
                            confirmSubmit(url, title, reviewInt, "", obj);
                            $layer.close(index);
                        });
                    }
                    if ((session === "管理员" || session === "教师") && obj.data.reviewId != 1) {
                        msg($layer, "已经申核过了");
                    }
                    if (session === "学生" && obj.data.reviewId === 0) {
                        $layer.confirm("确认" + title + "吗？", {icon: 3, title: title}, function (index) {
                            confirmSubmit(url, title, reviewInt, "", obj);
                            $layer.close(index);
                        });
                    }
                    if (session === "学生" && obj.data.reviewId != 0) {
                        msg($layer, "已经申请过了");
                        alert("sss");
                    }
                }
            });
        });
    });
</script>

<input type="hidden" class="layui-input" th:value="${session.user.userType}" id="session">

<script th:inline="javascript" type="text/html" id="sid">
    {{#
    return d.student.sid;
    }}
</script>
<script th:inline="javascript" type="text/html" id="name">
    {{#
    return d.student.name;
    }}
</script>

<script th:inline="javascript" type="text/html" id="reviewId">
    {{#
    if (d.reviewId === 0) {
    return "待申核";
    }
    if (d.reviewId === 1) {
    return "申核中";
    }
    if (d.reviewId === 2) {
    return "申核完成无误";
    }
    }}
</script>
<div th:insert="~{fragment/header :: footer}"></div>
</body>
<script language="JavaScript" th:src="@{'/webjars/layui/2.3.0/layui.all.js'}" charset="utf-8"></script>
</html>